<template>
    <div id="login">
        <div class="login-modal">
            <p class="title">厦门农商银行信托代销管理中心</p>
            <el-form ref="ruleForm" :model="form" :rules="rules">
                <el-form-item label="" prop="username">
                    <el-input v-model="form.username" placeholder="账号"></el-input>
                </el-form-item>
                <el-form-item label="" prop="password">
                    <el-input type="password" auto-complete="new-password" v-model="form.password" placeholder="密码"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="login" :disabled="btnDisabled">登 录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import {login} from '@/api/user';
import {storageLocal} from '@/common/utils/storage';

export default {
    name: 'login',
    data() {
        return {
            form: {
                username: process.env.NODE_ENV === 'development' ? 'admin' : '',
                password: process.env.NODE_ENV === 'development' ? '123456' : '',
            },
            rules: {
                username: [
                    {required: true, message: '请输入账号', trigger: 'blur'},
                ],
                password: [
                    {required: true, message: '请输入密码', trigger: 'blur'},
                ],
            },
            btnDisabled: false,
        };
    },
    created() {
        this.$store.commit('setUser', {});
        storageLocal.clear();
    },
    methods: {
        login() {
            this.btnDisabled = true;
            // storageLocal.set('token', '12322344');
            // location.href = '/';
            this.$refs.ruleForm.validate((valid) => {
                if (!valid) {
                    this.btnDisabled = false;
                    return;
                }
                const {username, password} = this.form;
                login({
                    userName: username,
                    password,
                }).then(({data}) => {
                    const {token, user} = data;
                    storageLocal.set('token', token, {hour: 24});
                    const {id, userName, realName} = user;
                    this.$store.commit('setUser', {id, userName, realName});
                    this.btnDisabled = false;
                    location.href = '/';
                }).catch(err => {
                    this.btnDisabled = false;
                });
            });
        },
    },
};
</script>

<style scoped lang="less">
#login{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    width: 100%;
    height: 100%;
    background: #000;
    .login-modal{
        width: 500px;
        height: 300px;
        background: #fff;
        color: #333;
        border-radius: 10px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        padding-top: 30px;
        .title{
            font-size: 28px;
            text-align: center;
            margin-bottom: 20px;
        }
        .el-form{
            width: 80%;
            margin: auto;
            .el-button{
                width: 100%;
            }
        }
    }
}
</style>
